<template>
  <div class="menu-grid">
    <div class="mg-title-bar">
      <h3 class="mg-title-text">{{ barTitle }}</h3>
    </div>

    <div class="crm-mg__main">
     <div class="crm-mg__list">
      <div v-for="(item, index) in gridList" class="crm-mg__item" :class="{'odd': index % 2 == 0, 'even': index % 2 !== 0 }">
        <router-link class="crm-mg__link" :to="item.link">
          <div class="crm-mg__left">
            <img class="crm-mg__ico" :src="item.icon"/>
          </div>
          <div class="crm-mg__right">
            <span class="crm-mg__text">{{ item.text }}</span>
          </div>
        </router-link>
      </div>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    props: {
    gridList : {
      type : Array,
      required: true
    },
    barStyleName : {//颜色条的类名
      type: String,
      default : 'default'//默认的类名如 class="color-horiz-bar defaut",该值有传参barStyleName决定
    },

    barTitle : {
      type: String,
      default: '标题条名称'
    }
    },
    data () {
    return {

    };
    },

    mounted () {
      console.log('图片服务器:', this.imgServer);
    },

    computed:{

    }
  }
</script>

<style lang="less">
    @import "../less/base";

    .crm-mg__main{
    overflow: hidden;
    border-bottom: 1px solid #EDEDED;
    }

    .crm-mg__list {
     &:extend(.clearfix all);

     display: block;
     width: 100%;
     background-color: white;

     margin-bottom: -1px;

    }

    .crm-mg__item.odd{

    }

    .crm-mg__item.even{

    }

    .crm-mg__item {

      width: 50%;
      float: left;
      overflow: hidden;


      .crm-mg__link {
        border-top: 1px solid #EDEDED;
        border-right: 1px solid #EDEDED;
        border-bottom: 1px solid #EDEDED;
        margin-top: -1px;


        &:extend(.clearfix all);
        padding: 10px;

        display: block;

        &>*{
        float: left;
        }
      }

      .crm-mg__left {

        height: @data-grid-item-size;
        width: @data-grid-item-size;

        .crm-mg__ico{
          width: 100%;
          height: 100%;
          border-radius: @data-grid-ico-raius;
        }
      }

      .crm-mg__right{

        line-height: normal;
        padding-left: 10px;
        font-size: 14px;
        max-width: 63%;

        &>*{
          display: block;
          height: @data-grid-item-size/2;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .crm-mg__text{
          color:#8F939A;
          margin-top: 10px;
        }

        .crm-mg__btext{
          color: #232323;
        }
      }

    }

    @media(min-width:640px) {
      .crm-mg__item {
        width: 10rem
      }
    }


    .mg-title-bar{

    &:extend(.clearfix all);//继承清除浮动

    @barHeight : 30px;

    padding-top: 10px;
    border-bottom: 1px solid #EDEDED;
    height:@barHeight;


    &>*{
      float: left;
    }

    .color-horiz-bar{

      height: inherit;
      width: 10px;

      &.default{//&相当于.color-horiz-bar.default
      background-color: rgb(241,206,29);
      }
    }

    .mg-title-text{
      height: inherit;
      line-height: @barHeight;
      padding-left: 10px;
      color: #414141;
      font-size: 14px;
      font-weight: normal;
    }
    }
</style>
